<template>
  <div>
    <AccNav
      class="mb-20"
      style="justify-content: flex-end"
      v-model="currentParamType"
      :options="optionsType"
      @click-change="handleChangeParamType"
    ></AccNav>
    <el-card class="head-card">
      <div class="grade-class">
        <div class="left">
          <AccNav
            style="margin-right: 30px"
            v-model="currentParam"
            :options="options"
            @click-change="handleChangeParam"
          ></AccNav>
          <el-form
            ref="filterForm"
            :inline="true"
            :model="queryParams"
            size="small"
          >
            <el-form-item label="年级" v-if="currentParam === '学生'">
              <el-select
                style="width: 150px"
                value-key="id"
                filterable
                clearable
                size="small"
                v-model="queryParams.gradeNo"
                placeholder="请选择"
                @change="handleChangeGrade"
              >
                <el-option
                  v-for="item in gradeOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="班级" v-if="currentParam === '学生'">
              <el-select
                style="width: 150px"
                filterable
                clearable
                size="small"
                v-model="queryParams.classNo"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in classOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.classNo"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="部门" v-if="currentParam === '教职工'">
              <depart-tree
                style="width: 150px"
                class="depart-tree"
                v-model="queryParams.deptNo"
                :departments="departments"
                @change="handleSearch"
              />
            </el-form-item>
            <el-form-item label="姓名">
              <el-input
                clearable
                size="small"
                style="width: 150px"
                v-model.trim="queryParams.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="上报状态">
              <el-select
                style="width: 150px"
                filterable
                clearable
                size="small"
                v-model="queryParams.reportStatus"
                placeholder="请选择"
              >
                <el-option label="已上报" value="0" />
                <el-option label="未上报" value="1" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button v-if="checkAuthority('/stu/select') && currentParam === '学生'" size="small" type="primary" @click="handleSearch"
                >查询</el-button>
              <el-button v-if="checkAuthority('/teacher/select') && currentParam === '教职工'" size="small" type="primary" @click="handleSearch"
                >查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="right">
          <div v-if="checkAuthority('/teacher/eyes') && currentParam === '教职工'" class="switch-btn cursor iconfont" :class="[isShow ? 'icon-yanjing': 'icon-biyan']" @click="handleClickIsShow"></div>
          <el-button v-if="checkAuthority('/student/down')" size="small" type="primary" @click="handleExport"
            >导出</el-button
          >
        </div>
      </div>
    </el-card>
    <Students
      v-if="currentParam === '学生'"
      :type="currentParamType"
      :listData="listData"
      @getNextPage="getNextPage"
      @handleSearch="handleSearch"
      @showPicturePreview="showPicturePreview"
    />
    <TeachingStaff
      v-if="currentParam === '教职工'"
      :type="currentParamType"
      :listData="listData"
      @select-row="handleSelectRow"
      @getNextPage="getNextPage"
      :isShow="isShow"
      @handleSearch="handleSearch"
      @showPicturePreview="showPicturePreview"
    />
    <acc-page
      v-if="currentParamType === '列表'"
      :total="total"
      :page-size="pageVo.pageSize"
      :current-page="pageVo.pageNum"
      @current-change="handleChangePage"
      @size-change="handleChangeSize"
    />
    <!-- 图片预览组件 -->
    <PicturePreview
      ref="PicturePreview"
      :nucleicUrl="getNucleicUrl"
      @prev="changeIndex(-1)"
      @next="changeIndex(1)"
      @close="showIndex = null"
    />
  </div>
</template>

<script>
import AccNav from '@/components/common/AccNav'
import Students from './students'
import TeachingStaff from './teachingStaff'
import PicturePreview from './common/PicturePreview.vue'
import { queryDeptListBySchoolNo } from '@/views/children/basic/js/teacherInfo'
import { getGradeList, getclassesList, queryNucleicCodeStudentList, queryNucleicCodeTeacherList, exportNucleicCodeTeacherList, exportNucleicCodeStudentList } from '@/views/children/antiepidemic/js/base'
import DepartTree from '@/views/children/basic/components/departTree'
import { decrypt } from '@/utils/crypto'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限
export default {
  components: { AccNav, Students, TeachingStaff, DepartTree, PicturePreview },
  data () {
    return {
      departments: [],
      optionsType: ['列表', '宫格'],
      currentParamType: '列表',
      options: ['学生', '教职工'],
      currentParam: '学生',
      queryParams: {
        classNo: null
      },
      pageVo: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      gradeOptions: [],
      classOptions: [],
      listData: [],
      tenantNo: null,
      tableSelectIds: [],
      loadingQuery: false,
      showIndex: null,
      isShow: false
    }
  },
  created () {
    this.getGrade()
  },
  mounted () {
    let userInfo = localStorage.getItem('Standard__User-Info')
    this.tenantNo = JSON.parse(userInfo).value.tenantNo
    this.handleSearch()
    this.queryDeptListBySchoolNo()
    let Then = this
    document.onkeydown = function () {
      if (Then.showIndex === null) return
      let key = window.event.keyCode
      console.log(key, '键盘码')
      if (key === 37) {
        Then.changeIndex(-1)
      } else if (key === 39) {
        Then.changeIndex(1)
      }
    }
  },
  computed: {
    getNucleicUrl () {
      return (this.showIndex || this.showIndex === 0) ? this.listData[this.showIndex].nucleicUrl : ''
    }
  },
  methods: {
    checkAuthority,
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    changeIndex (value) {
      let index = this.showIndex + value
      if (index < 0) {
        // 提示
        this.$message.warning('已经是第一张啦，没有上一张啦')
      } else if (index >= this.listData.length) {
        this.$message.warning('已经是最后一张啦，没有下一张啦')
      } else {
        this.showIndex = index
      }
    },
    showPicturePreview (value) {
      this.showIndex = value
      this.$refs.PicturePreview.showPicturePreview()
    },
    queryDeptListBySchoolNo () {
      queryDeptListBySchoolNo({}).then(res => {
        if (res.code === 0) {
          this.departments = res.data
        }
      })
    },
    getGrade () {
      getGradeList({ pageNum: 1, pageSize: 999, status: 1 }).then(res => {
        if (res.code !== 0) return
        this.gradeOptions = res.data.records
      })
    },
    getclasses () {
      getclassesList({ gradeName: this.queryParams.gradeNo.name, status: 1, pageNum: 1, pageSize: 999 }).then(res => {
        if (res.code !== 0) return
        this.classOptions = res.data.classList.records
      })
    },
    handleChangeGrade (val) {
      this.queryParams.classNo = null
      this.classOptions = []
      if (val !== '') this.getclasses()
    },
    handleChangeParamType (val) {
      this.tableSelectIds = []
      this.handleSearch()
    },
    handleChangeParam (val) {
      this.queryParams = {}
      this.handleSearch()
    },
    handleSelectRow (ids) {
      console.log('ids', ids)
      this.tableSelectIds = ids
    },
    handleExport () {
      let temp = {}
      Object.assign(temp, this.queryParams, { noList: this.tableSelectIds })
      temp.tenantNo = this.tenantNo
      if (this.currentParam === '教职工') {
        exportNucleicCodeTeacherList(temp).then(() => {
          this.$message.success('导出成功')
        })
      }
      if (this.currentParam === '学生') {
        temp.gradeNo = temp?.gradeNo?.no || null
        exportNucleicCodeStudentList(temp).then(() => {
          this.$message.success('导出成功')
        })
      }
    },
    handleSearch () {
      this.pageVo.pageNum = 1
      this.listData = []
      this.loadDataList()
    },
    getNextPage () {
      if (this.total <= this.listData.length || this.loadingQuery) return
      this.loadingQuery = true
      this.pageVo.pageNum++
      this.loadDataList()
    },
    loadDataList () {
      let temp = {}
      Object.assign(temp, this.queryParams, this.pageVo)
      temp.tenantNo = this.tenantNo
      let listData = this.currentParamType === '列表' ? [] : this.listData
      temp.pageSize = this.currentParamType === '列表' ? this.pageVo.pageSize : 20
      if (this.currentParam === '学生') {
        temp.gradeNo = temp?.gradeNo?.no || null
        queryNucleicCodeStudentList(temp).then(res => {
          this.loadingQuery = false
          const { code, data } = res
          if (code === 0) {
            this.listData = (listData).concat(data.records)
            this.total = data.total
          }
        })
      } else {
        queryNucleicCodeTeacherList(temp).then(res => {
          this.loadingQuery = false
          let { code, data } = res
          data = JSON.parse(decrypt(data))
          console.log('data', data)
          if (code === 0) {
            this.listData = (listData).concat(data.records)
            this.total = data.total
          }
        })
      }
    },
    handleChangePage (page) {
      this.pageVo.pageNum = page
      this.loadDataList()
    },
    handleChangeSize (size) {
      this.pageVo.pageSize = size
      this.handleSearch()
    }
  },
  beforeDestroy () {
    document.onkeydown = null
  }
}
</script>

<style lang='scss' scoped>
.head-card {
  .el-form-item {
    margin-bottom: 0;
  }
}
.grade-class {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
    > div {
      flex-wrap: nowrap;
    }
    .label {
      font-size: 18px;
      font-weight: 550;
    }
  }
  .right {
    display: flex;
    align-items: center;
  }
}
</style>
